// vue.config.js 配置
const path = require('path')
const webpack = require('webpack')

function resolve(dir) {
	return path.join(__dirname, dir)
}

module.exports = {
	// 部署开发环境和生产环境
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // publicPath: '/',  // 基本路径,线上打包的路径
  outputDir: 'dist',  // 输出目录
  assetsDir: '', //  用于嵌套生成的静态资产（js，css，img，fonts）的目录。
  productionSourceMap: false, // 生产环境sourceMap,为true的时候打包会生成.map文件,体积大很多 /，打包减小体积,去除.map文件
  // webpack配置
  configureWebpack: {
		devServer: {
			host: 'localhost', // 主机名
			port: 8080, // 端口号
			https: false,
			open: true, // 浏览器自动打开
			proxy: { // 配置跨域
				'/api': { // 代理1
					target: 'http://localhost:3000',
					ws: true, //  如果是http代理此处可以不用设置
					changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
					pathRewrite: {
						'^/api': ''
					}
				},
				'/sys': { // 代理2
					target: 'http://localhost:3000',
					ws: true,
					changeOrigin: true,
					pathRewrite: {
						'^/sys': ''
					}
				}
			}
		}
	},
	css: {
		// vue项目中 路径使用的@和~的区别
		//@：@这东西代表着到src这个文件夹的路径
		//~@: 类似于相对路径 ~@/assets/scss/es.scss ==>> 表示相对于@（别名，一般是src目录）下的 assets/scss/es.scss；
		// 引入全局公共scss,可以从中调取自己需要的scss
		    loaderOptions: {
		      sass: {
		        prependData: `@import "@/assets/css/reset.scss";`
		      }
		    },
		// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less(us)?) 文件视为 CSS Modules 模块。
		requireModuleExtension: true,
		// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
		// 默认生产环境下是 true，开发环境下是 false
		// 是否使用css分离插件
		// 当为true的时候，更改vue的css浏览器不刷新；为false的时候刷新
		// 打包的时候变为true
		 extract: false,
		 // 开启 CSS source maps?为false,减少css打包体积
		 sourceMap: false,
		 // css预设器配置项
		 loaderOptions: {},
	 },
	chainWebpack: (config) => {
		// 修改文件引入自定义路径
		config.resolve.alias
			.set('@', resolve('src'))
			.set('style', resolve('src/images'))
	},
  // 第三方插件配置
  pluginOptions: {}
}